{% extends 'base.html' %}
{% load humanize %}
{% load custom_filters  %}
{% load math_extras %}
{% block content %}
<h1 class="text-3xl font-semibold text-center text-gray-800 my-6">Simulateur de commandes des copmosants</h1>

        {% csrf_token %}
        <form method="GET">
          <input id="default_code" name="default_code"  class="form-control me-2" type="search" placeholder="Search" aria-label="Search" value="{{ default_code }}">
          
         </form>

        <label for="">Nombre de Mois:</label>
        <input type="number" value="1" name="nbr_mois" id="nbr_mois" style="text-align: right;">
        <label for="">Transit Time:</label>
        <input type="number" value="90" name="transit" id="transit" style="text-align: right;">
        <label for="">Lead Time:</label>
        <input type="number" value="30" name="lead" id="lead" style="text-align: right;">
        <input type="checkbox" name="stock_pf" id="stock_pf" checked><label for=""> Stocks Produits finis</label>
        <br>
        <button class="btn btn-outline-success" name="pdp" id="pdp">Calculer</button>
        <br>
        
        
       
        <table>
            <tr>
                <td style="width: 90%;"></td>
                <td style="width: 10%; text-align: right;">
                  <strong>Résulat : {{nbr_result}}</strong> 
                </td>
                <td style="width: 10%" ><button  class="btn btn-outline-success" onclick="exportToExcel()">Excel</button></td>
                
            </tr>
         </table>
        <table class="table table-striped" border="1" id="tab_cbn">
            <thead>
                <tr>
                    <th tyle="text-align: center;" onclick="sortTable(0)">id</th>
                    <th tyle="text-align: center;" onclick="sortTable(0)">Code</th>
                    <th tyle="text-align: center;" onclick="sortTable(1)">Désignation</th>
                    <th tyle="text-align: center;" >Nomenclatures</th>
                    <th tyle="text-align: center;" onclick="sortTable(2)">Quantite Dsiponible</th>
                    <!-- <th tyle="text-align: center;" onclick="sortTable(3)">Prévision de vente</th> -->
                    
                </tr>
            </thead>
            <tbody>
                {% for produit in products %}
                <tr>
                    <td>{{produit.id}}</td>
                    <td>{{produit.default_code}}</td>
                    <td >{{produit.name}}</td>
                    <td >
                      <select id="boms" name="boms" style="width: 250px;">
                        {% for bom in boms %}
                          {% if produit.id == bom.product_id.0 %}
                            <option value="{{bom.id}}">{{bom.name}}</option>
                          {% endif %}
                        {% endfor %}
                    </select>
                    </td>
                    <td style="text-align: right;">{{produit.virtual_available|intspace}}</td>
                    
                    
                </tr>
                {% endfor %}
            </tbody>
        </table>
 
<script>
var nbr_mois = 0
var list_tab = []
function tableToPairs(tableId) {
        const table = document.getElementById(tableId);
        list_tab = [];
        
        for (const row of table.tBodies[0].rows) {
            //const qty = parseFloat(row.cells[4].querySelector('input[type="number"]').value)*nbr_mois
            const virt_qty = parseFloat(row.cells[4].textContent.replace(' ','').trim())
            const pair = [row.cells[0].textContent.trim(),row.cells[3].querySelector('select').value,virt_qty ];
            list_tab.push(pair);
        }

        return list_tab;
    }

    // Utilisation
    
    document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function() {
                const row = this.closest('tr'); // Trouver la ligne correspondante
                row.remove(); // Supprimer la ligne
            });
        });

$(document).ready(function() {
    $('#pdp').click(function() {
        
        //alert(gamme.checked);
        const inputElement = document.getElementById("nbr_mois");
        const numberValue = inputElement.value; // Récupère la valeur sous forme de chaîne
        const parsedNumber = parseFloat(numberValue);
        nbr_mois = parsedNumber
        console.log('mois = '+parsedNumber);

        const inputElement_tt = document.getElementById("transit");
        const numberValue_tt = inputElement_tt.value; // Récupère la valeur sous forme de chaîne
        const parsedNumber_tt = parseFloat(numberValue_tt);
        transit_time = parsedNumber_tt
        console.log('_tt = '+transit_time);
        const inputElement_lt = document.getElementById("lead");
        const numberValue_lt = inputElement_lt.value; // Récupère la valeur sous forme de chaîne
        const parsedNumber_lt = parseFloat(numberValue_lt);
        lead_time = parsedNumber_lt
        const checkpf = document.getElementById('stock_pf');
        const listFromTable = tableToPairs("tab_cbn");
        //const parsedNumber = parseFloat(numberValue); // Convertit en nombre si nécessaire
        if(listFromTable.length==0)
        {
            alert("Aucun produit sélectionné");
        }
        else
        {
          
          console.log(listFromTable);
          $.ajax({
                url: '/Simulation_Commande_calcule/',  // L'URL de la vue Django qui va traiter la requête
                type: 'POST',
                data: {
                    articles:JSON.stringify(listFromTable),
                    Nbr_month:nbr_mois,
                    Transit_time:transit_time,
                    Lead_time:lead_time,
                    stock_pf : checkpf.checked,
                    csrfmiddlewaretoken: '{{ csrf_token }}'  // Nécessaire pour les requêtes POST en Django
                },
                success: function(response) {
                    
                    
                    window.location.href = '/Simulation_Commande_calcule/'
                },
                error: function(xhr, status, error) {
                    // Gérer les erreurs
                    console.error("Erreur: " + error);
                }
            }); 
        }
                  
});});

let ascendingOrder = [];

function sortTable(columnIndex) {
  const table = document.getElementById("tab_cbn");
  const rows = Array.from(table.rows).slice(1); // Exclut l'en-tête
  const headers = table.querySelectorAll("th");

  // Initialiser l'état de tri pour la colonne si elle n'a jamais été triée
  if (ascendingOrder[columnIndex] === undefined) {
    ascendingOrder[columnIndex] = true;
  }

  // Utiliser l'état de tri actuel pour la colonne
  const ascending = ascendingOrder[columnIndex];

  rows.sort((rowA, rowB) => {
    var cellA = rowA.cells[columnIndex].innerText;
    var cellB = rowB.cells[columnIndex].innerText;
    if(columnIndex===2||columnIndex===3)
    {
      cellA = cellA.replace(" ", "");
      cellB = cellB.replace(" ", "");
    }

    
    
    const a = isNaN(cellA) ? cellA.toLowerCase() : parseFloat(cellA);
    const b = isNaN(cellB) ? cellB.toLowerCase() : parseFloat(cellB);

    return ascending ? (a > b ? 1 : -1) : (a < b ? 1 : -1);
  });

  // Alterner l'ordre pour la prochaine utilisation
  ascendingOrder[columnIndex] = !ascending;

  // Réinsérer les lignes triées dans le tableau
  rows.forEach(row => table.tBodies[0].appendChild(row));
  headers.forEach((header) => {
    const arrow = header.querySelector('.sort-arrow');
    if (arrow) {
      arrow.remove(); // Supprimer la flèche des autres colonnes
    }
  });

  // Ajouter la flèche à la colonne triée
  const currentHeader = headers[columnIndex];
  const arrow = document.createElement('span');
  arrow.classList.add('sort-arrow');
  arrow.innerHTML = ascending ? '↑' : '↓'; // Choisir la flèche selon l'ordre du tri
  currentHeader.appendChild(arrow);
} 

function exportToExcel() {
  // Créez un nouveau tableau sans les <input> pour l'exportation
  let table = document.getElementById("tab_cbn");
  let cloneTable = table.cloneNode(true);

  // Parcourez les cellules pour remplacer les <input> par leur valeur
  let inputs = cloneTable.querySelectorAll("input[type='number']");
  inputs.forEach(input => {
    let cell = input.parentNode;
    cell.textContent = input.value; // Remplace l'<input> par sa valeur
  });

  // Convertissez le tableau modifié en workbook et exportez-le
  let workbook = XLSX.utils.table_to_book(cloneTable);
  XLSX.writeFile(workbook, 'cbn.xlsx');
}

</script>

{% endblock %}